<template>
	<!-- 堆积统计图 -->
	<div class="">
		<div></div>
	</div>
</template>

<script>
import { StackedBar } from '@antv/g2plot'

export default {
	name: 'StackedBar',
	props: {
		chartObj: {
			type: Object,
			required: true,
		},
		data () {
			return {
				StackedBar: null			}
		}
	},
	methods: {
		getBarChart ( Object ) {
			// todo 图形调整
			const stackBarPlot = new StackedBar(
				document.getElementById( Object.chartId ),
				{
					forceFit: true,
					pixelRatio: 1,
					render: 'svg',
					title: { visible: false },
					data: Object.data,
					yField: 'exam_type',
					xField: 'count',
					xAxis: {
						title: { visible: false },
						// formatter: v => `${ Math.round( v / 10000 ) }万`,
					},
					yAxis: { title: { visible: false } },
					columnSize: 40,
					color: [ '#94826E', '#79B1AA', '#EDAA75' ],

          /*
           * 	color: d => {
           * 	if (d === 'a') return ['blue', 'yellow', 'green']
           * 	return ['#94826E', '#79B1AA', '#EDAA75']
           * 	},
           */
					stackField: 'msg',
					legend: {
						position: 'top-left',
						marker: { symbol: 'circle' },
					},
					label: { position: 'middle' },
				},
			)
			stackBarPlot.render()
			this.StackedBar = stackBarPlot
			console.log( stackBarPlot );
			console.log( this.stackBarPlot );
		},
		rePaintChart () {
			// 重置图表
		}

	}
}
</script>

<style lang="less">
#-axis-title {
	display: none;
}
</style>
